{include file="public/header" /}
<script src="/static/public/ueditor/ueditor.config.js"></script>
<script src="/static/public/ueditor/ueditor.all.min.js"></script>
<script src="/static/public/ueditor/lang/zh-cn/zh-cn.js"></script>
<style>
    .fuhao{
        margin-top: 2em;
    }

</style>
<style>
    .layui-upload-img { width: 90px; height: 90px; margin: 0; }
    .pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
    .pic-more li { width:90px; float: left; margin-right: 5px;}
    .pic-more li .layui-input { display: initial; }
    .pic-more li a { position: absolute; top: 0; display: block; }
    .pic-more li a i { font-size: 24px; background-color: #008800; }
    #slide-pc-priview .item_img img{ width: 90px; height: 90px;}
    #slide-pc-priview li{position: relative;}
    #slide-pc-priview li .operate{ color: #000; display: none;}
    #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
    #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
    #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
    #slide-pc-priview li:hover .operate{ display: block;}
</style>
<body>
<div class="x-body ">
    <form  class="layui-form">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">商品基本信息</li>
                <li>商品描述</li>
                <li>商品属性</li>
                <li>商品相册</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item  layui-show">
                    <div class="layui-form-item">
                        <label for="goods_code" class="layui-form-label">商品编号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_code" name="goods_code" disabled value="{$googds_code}" lay-verify="required"   autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="goods_name" class="layui-form-label">商品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="goods_name" name="goods_name" lay-verify="required"   autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品主图</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="upload1">上传图片</button>
                            <input type="hidden" id="img_url" name="og_thumb" value=""/>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" width="100px" height="80px" id="demo1"/>
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">推荐位</label>
                        <div class="layui-input-block">
                            <input type="radio" name="recommend_id" value="0" checked title="不推荐"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>不推荐</div></div>
                            {volist name = "recommends" id ="recommend"}
                            <input type="radio" name="recommend_id" value="{$recommend.id}" title="{$recommend.name}"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>{$recommend.name}</div></div>
                            {/volist}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否上架</label>
                        <div class="layui-input-block">
                            <input type="radio"  checked name="on_sale" value="1" title="上架"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>上架</div></div>
                            <input type="radio" name="on_sale" value="0" title="下架"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>下架</div></div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="width: 300px;">
                        <label class="layui-form-label">商品分类</label>
                        <div class="layui-input-block">
                            <select name="category_id" lay-verify="required">
                            {volist name='categorys' id='vo'}
                            <option value="{$vo.id}"><?php echo str_repeat("-",$vo['level']*3)?>{$vo.cate_name}</option>
                            {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="cname" class="layui-form-label">市场价</label>
                        <div class="layui-input-inline">
                            <input type="text" id="markte_price" name="markte_price" lay-verify="required"   autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="cname" class="layui-form-label">本店价</label>
                        <div class="layui-input-inline">
                            <input type="text" id="shop_price" name="shop_price" lay-verify="required"   autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="cname" class="layui-form-label">库存</label>
                        <div class="layui-input-inline">
                            <input type="text" id="stock" name="stock" lay-verify="required"   autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">文章内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" id="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">属性名称</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" value=""  id="key" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">属性值</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" value="" id="value" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"></label>
                            <input  type="button" class="layui-btn" value="增加" onclick="add()">
                    </div>
                    <hr>
                    <div id="goods_sx_add">

                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item" id="pics">
                        <div class="layui-form-label">相册图集</div>
                        <div class="layui-input-block" style="width: 70%;">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
                                <div class="pic-more">
                                    <ul class="pic-more-upload-list" id="slide-pc-priview">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <button class="layui-btn" lay-submit lay-filter="addId">
                            增加
                        </button>
                    </div>
                </div>

        </div>


        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;

                //…
            });
        </script>
    </form>
</div>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery;
        var upload = layui.upload;
        upload.render({
            elem: '#slide-pc',
            url: '{:url('admin/Goods/upload1')}',
            size: 2048,
            exts: 'jpg|png|jpeg',
            multiple: true,
            before: function(obj) {
            layer.msg('图片上传中...', {
                icon: 16,
                shade: 0.01,
                time: 0
            })
        },
        done: function(res) {
            layer.close(layer.msg());//关闭上传提示窗口
            if(res.status == 0) {
                return layer.msg(res.message);
            }
            //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');
            $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div><img src="/../' + res.filepath + '" class="img" ><input type="hidden" name="pc_src[]" value="' + res.filepath + '" /></li>');
        }
    });
    });
    //点击多图上传的X,删除当前的图片
    $("body").on("click",".close",function(){
        $(this).closest("li").remove();
    });
    //多图上传点击<>左右移动图片
    $("body").on("click",".pic-more ul li .toleft",function(){
        var li_index=$(this).closest("li").index();
        if(li_index>=1){
            $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
        }
    });
    $("body").on("click",".pic-more ul li .toright",function(){
        var li_index=$(this).closest("li").index();
        $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
    });
</script>

<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    UE.getEditor('content',{initialFrameWidth:800,initialFrameHeight:600,});
</script>
<script>
    function  add() {
        var key = $("#key").val();
        var value = $("#value").val();
        var k_v = key+','+value;
        $("#key").val('');
        $("#value").val('');
        if(key==='' || value ===''){
            layer.msg('请输入内容');
            return ;
        }
        var html = $("#goods_sx_add").html();
        html += "<div class='layui-form-item'> <label for='title' class='layui-form-label'>";
         html += key +"</label> <div class='layui-input-inline'> <input type='text' id='title' value="+ value +" name='title' lay-verify='required'  autocomplete='off' class='layui-input' >  <input type='hidden' id='title' value="+  k_v +" name='keyName[]' lay-verify='required'  autocomplete='off' class='layui-input' > <span id='fuhao'  onclick='addphoso(this)' style=\"position: absolute;left: 200px;top:10px;cursor:pointer\" style='color:red'>[-]</span> </div> </div>";
        $("#goods_sx_add").html(html)
    }

    function addphoso(obj) {
        var div = $(obj).parent().parent();
            div.remove();
    }
</script>
<script type="text/javascript">
    layui.use('upload', function(){
        var upload = layui.upload
            , $ = layui.jquery;
        var uploadInst = upload.render({
            elem: '#upload1' //绑定元素
            ,url: "{:url('admin/brand/upload')}"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code === 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                document.getElementById("img_url").value = res.url;

            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
</script>

<script>
    layui.use(['form'], function(){
        $ = layui.jquery;
        var form = layui.form,layer = layui.layer;
        //监听提交
        form.on('submit(addId)', function(data){
            //console.log(data);
            $.post("{:url('admin/Goods/add')}",data.field,function(info){
                if (info.errorCode===1) {
                    layer.alert("添加成功", {icon: 6},function () {
                        window.parent.location.reload();  //刷新父级页面
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前弹出层
                        parent.layer.close(index);
                    });
                }else{
                    layer.alert(info.msg, {icon: 5});
                }
            },'json');
            return false;
        });
    });
</script>
</body>

</html>